<template>
  <div id="#app">
    <!-- 第一种情况不显示页面结构（登录，注册） -->
    <RouterView v-show="!route.meta.requiresAuth"/>
    <!-- 第二种显示页面结构（仪表盘，权限管理，用户管理） -->

    <el-container v-show="route.meta.requiresAuth">
      <el-aside>
        <!-- 调用侧边菜单组件 -->
        <MenuAside />
      </el-aside>
      <el-container>
       
        <el-header>
          <!-- 调用头部组件 -->
          <HeaderCom />
        </el-header>
        <el-main>
          <!-- 页面路由视图占位 -->
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import HeaderCom from './components/HeaderCom.vue';
import MenuAside from './components/MenuAside.vue';
// 引入路由配置方法
import { useRoute } from 'vue-router'

const route = useRoute();
</script>

<style scoped lang="less">
.el-container {
  .el-aside {
    width: auto;
    min-height: 100vh;
    background-color: #545c64;
  }
  .el-container {
    .el-header {
      //background-color: red;
      border-bottom: 1px solid #f5f5f5 ;
    }
    .el-main {
    }
  }
}
</style>
